<!--
@author fangsong
@Date  2023-08-24
复制自PostList，增加查询时工资限制，展示高工资高端职位，
提供给电子名片使用
-->
<template>
  <div class="PostList new-logo">
    <!-- 头部 -->
    <nav-bar :title="title" :left-arrow="false"></nav-bar>
    <div class="circle_bg"></div>
    <!-- 内容区域 -->
    <div class="main cl">
      <!-- banner -->
      <!--      <div class="banner"></div>-->
      <!-- block -->
      <div class="block w1200">
        <div class="left fl">
          <div class="listBody">
            <nav-bar :title="title"></nav-bar>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div
                  class="card"
                  v-for="(item, index) in list"
                  :key="item.id || index"
                  @click="detail(item.jobId || item.id)"
                >
                  <div class="top">
                    <h2 class="title">
                      {{ item.title || item.opJob.jobName }}
                    </h2>
                    <span class="salary" v-if="item.opJob">{{
                      item.opJob.minMoney | salaryFilter(item.opJob.maxMoney)
                    }}</span>
                    <span class="salary" v-else>{{
                      item.minMoney | salaryFilter(item.maxMoney)
                    }}</span>
                  </div>
                  <p class="types">
                    {{ item.jobCity_dictText || item.opJob.jobArea }}
                    <span class="divider"></span>
                    {{ item.eduLevel_dictText || edulevelFilter(item.opJob) }}
                    <span class="divider"></span>
                    {{
                      item.opJob
                        ? experienceFilter(item.opJob)
                        : experienceFilter(item)
                    }}
                    <span class="divider"></span>
                    {{ item.needCount || item.opJob.needCount }}人
                  </p>
                  <p class="compony" v-if="item.companyName">
                    {{ item.companyName }}
                  </p>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import { Divider, List, PullRefresh } from "vant";
import { baseSo, myList } from "@/api/api";

export default {
  name: "PostListEcard",
  //组件注入
  components: {
    navBar,
    vanList: List,
    vanPullRefresh: PullRefresh,
    divider: Divider,
  },
  filters: {
    salaryFilter(a, b) {
      if (b < 1000) {
        return "面议";
      }
      if (a >= 1000) {
        return a / 1000 + "K" + "-" + b / 1000 + "K";
      } else {
        return a + "-" + b;
      }
    },
  },
  //存放数据
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
      },
      type: 0,
      prams: null,
      title: "",
    };
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    experienceFilter(e) {
      const experience = e.minExperience + "," + e.maxExperience;
      const res = this.$store.state.experience.find(
        (item) => item.value === experience
      );
      return res.label;
    },
    edulevelFilter(e) {
      const level = e.eduLevel + "";
      const res = this.$store.state.eduLevels.find(
        (item) => item.value === level
      );
      console.log(res);
      return res.label;
    },
    onLoad() {
      if (!this.prams) {
        this.prams = { type: "job","money.range": "20000,50000" };
      }
      if (parseFloat(this.type) !== 2) {
        baseSo(Object.assign(this.prams, this.listQuery))
          .then((response) => {
            if (response.result.current == 1)
              this.list = response.result.records;
            else this.list = this.list.concat(response.result.records);
            if (response.result.current >= response.result.pages) {
              this.finished = true;
            } else {
              this.listQuery.pageNo++;
            }
          })
          .finally(() => {
            this.loading = false;
            this.refreshing = false;
          });
        if (parseFloat(this.type) === 1) {
          this.title = "同类职位推荐";
        } else if (parseFloat(this.type) === 3) {
          this.title = "该公司其他职位";
        } else {
          this.title = "公司在招职位";
        }
      } else {
        myList(this.listQuery)
          .then((response) => {
            if (response.result.current == 1)
              this.list = response.result.records;
            else this.list = this.list.concat(response.result.records);
            if (response.result.current >= response.result.pages) {
              this.finished = true;
            } else {
              this.listQuery.pageNo++;
            }
          })
          .finally(() => {
            this.loading = false;
            this.refreshing = false;
          });
        this.title = "看过的职位";
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.listQuery.pageNo = 1;
      this.onLoad();
    },
    detail(id) {
      this.$router.push({ path: "/jobDetails", query: { id } });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.type = this.$route.query.type;
    this.prams =
      this.$route.query.prams && JSON.parse(decodeURI(this.$route.query.prams));
    this.onLoad();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss">
@import "../../styles/mixin.scss";

@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin text-ellipsisclamp($clamp) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
  overflow: hidden;
}

@mixin transition {
  transition: all 0.3s;
}

.PostList {
  position: relative;
  background: #f6f6f6;
  width: 100%;
  overflow: hidden;

  .main {
    .banner {
      width: 100%;
      height: 120px;
      background: url("../../assets/person-bg.jpg") center no-repeat;
      background-size: cover;
    }
  }
}
.card {
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  margin: 16px 30px 0px 30px;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 32px;
      font-weight: 600;
      flex: 1 1 auto;
      display: block;
      @include text-ellipsis;
    }
    .salary {
      font-size: 30px;
      color: #fe3d09;
      flex: 0 0 auto;
      margin-left: 20px;
    }
  }
  .types {
    // display: flex;
    font-size: 24px;
    // align-items: center;
    margin-top: 20px;
    // flex-wrap: wrap;
    line-height: 40px;
    .divider {
      // display: block;
      display: inline-block;
      vertical-align: middle;
      width: 1px;
      height: 24px;
      margin: 0 15px;
      background: #e2e2e2;
    }
  }
  .compony {
    margin-top: 25px;
    font-size: 24px;
    color: #999;
  }
}
.listBody {
  min-height: 100vh;
}
</style>
